.layui-layout-admin .layui-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-child a {
    color: #333
}
/* 边导航 */
.layui-layout-admin .layui-side {
    top: 0;
    width: 220px;
    z-index: 1001
}
.layui-layout-admin .layui-header .layui-nav .layui-nav-item, .layui-layout-admin .layui-logo {
    height: 50px;
    line-height: 50px
}

.layui-layout-admin .layui-logo {
    /*position: fixed;*/
    left: 0;
    top: 0;
    z-index: 1000;
    width: 220px;
    padding: 0 15px;
    box-sizing: border-box;
    overflow: hidden;
    font-weight: 300;
    background: #23262E no-repeat center center;
}

.layui-side-menu .layui-nav {
    width: 220px;
    margin-top: 50px;
    background: 0 0
}

.layui-layout-admin .layui-layout-left ,.layui-layout-admin .layui-body, .layui-layout-admin .layui-footer {
    left: 220px
}

/*.layui-layout-admin .layui-header {
    border-bottom: 1px solid #f6f6f6;
    box-sizing: border-box;
    background-color: #fff
}
.layui-layout-admin .layui-header a, .layui-layout-admin .layui-header a cite {
    color: #333
}*/




/* 顶部左侧导航 边导航 body footer增加过渡效果 */
.layui-layout-left, .layui-side, .layui-body, .layui-footer {
    transition: all .2s;
    -webkit-transition: all .4s
}

/* 缩短悬浮效果 */
.layui-layout-admin .layui-layout-left a {
    padding: 0
}

/* 当分辨率足够大时用于收缩导航 */
.layui-side-shrink {

}

/* 边导航收缩 */
.layui-side-shrink .layui-layout-admin .layui-side {
    width: 0
}

/* 顶部左侧导航 body footer 收缩*/
.layui-side-shrink .layui-layout-admin .layui-layout-left, .layui-side-shrink .layui-layout-admin .layui-body, .layui-side-shrink .layui-layout-admin .layui-footer {
    left: 0
}

/* 当分辨率足够小时用于展开导航 */
.layui-side-spread {

}



/* 边导航展开 */
.layui-side-spread .layui-layout-admin .layui-side {
    /*
        translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。
        其基本语法如下：translate3d(tx,ty,tz)

        tx：代表横向坐标位移向量的长度；
        ty：代表纵向坐标位移向量的长度；
        tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。
     */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0)
}

.layui-side-spread .layui-layout-admin .layui-layout-right {
    transform: translate3d(220px, 0, 0);
    -webkit-transform: translate3d(220px, 0, 0)
}
.layui-side-spread .layui-layout-admin .layui-layout-left, .layui-side-spread .layui-layout-admin .layui-body, .layui-side-spread .layui-layout-admin .layui-footer {
    transform: translate3d(220px, 0, 0);
    -webkit-transform: translate3d(220px, 0, 0)
}


/* 小于992px时 边导航收缩（左移200px）,其他距离左边界为0 */
@media screen and (max-width: 992px) {

    .layui-layout-admin .layui-side {
        transform: translate3d(-220px, 0, 0);
        -webkit-transform: translate3d(-220px, 0, 0);
        width: 220px
    }

    .layui-layout-admin .layui-layout-left, .layui-layout-admin .layui-body, .layui-layout-admin .layui-footer {
        left: 0
    }
}

